<template>
	<view>
  <div style="width: 100%; height: 100vh">
    <div
      style="
        width: 100%;
        height: 100rpx;
        background-color: ghostwhite;
        position: fixed;
        bottom: 90rpx;
        display: flex;
        justify-content: space-between;
        z-index: 999;
      ">
					<div style="height:100%;height: 100%; display: inline-block;">
					<div style="display: flex; height: 100%; width: 100%; align-items: center; justify-content: center;" >
						<wd-checkbox
:checked="checkall"
						checked-color="#d81e06"
						>全选</wd-checkbox>&nbsp;&nbsp;
            <div style="display:flex;flex-direction: column; "> &nbsp;
             <div>
              总计：<span style="color: red">￥{{priceall}}</span>
             </div>
             <div style="font-size: 20rpx; color: gray">
              为你节省<span style="color: red">￥{{save_money}}</span>
             </div>
            </div>
					</div>
				
					
					
					</div>
          <div style="line-height: 100rpx;">
						<wd-button  type="error">去下单({{cartlist.filter(item=>item.checked).length}})</wd-button>
          </div>
     
    </div>
	


    <div style="width: 95%; height: 100rpx;margin:0 auto; display:flex;justify-content: space-between;align-items: center;">
<div>
<span>自提点</span><span>万达刚才</span>
</div>
<div>
<span>编辑商品</span>
</div>
    </div>
    <div style="display: width:100%; background-color:ghostwhite;">
      <!-- 一i个商品 -->
      <div
        style="
          width: 90%;
          
          margin: 30rpx auto;
          background-color: white;
        "
      >
        <div>拼团商品</div>
        <div style="dwidth: 100%; display: flex;" >
          <div style="">
            
          <!-- <input type="checkbox" name="" id="" v-model="i._id" :check="i.checked" @change="handleChange(i.checked,i._id)"> -->
       
          <checkbox-group
           @change="handleChange"
           >
           <view v-for="i in cartlist.filter(item=>item.state===1)" :key="i._id" style="display:flex;margin-top:20rpx">

            <checkbox :value="i._id" :checked="i.checked" 
            style="width: 50rpx; height: 50rpx; line-height:250rpx"></checkbox>
            <div style="display: flex">

          
              <div style="width: 200rpx; height: 200rpx">
                <img
                  :src="i.goodsid.img"
                  style="width: 100%; height: 100%" 
                  alt=""
                />
              </div>
              <div
                style="
                  width: 400rpx;
                  height: 160rpx;
                  padding: 20rpx;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                "
              >
                <view class="" style="font-size: 25rpx">{{ i.goodsid.name }}</view>
                <view class="limitebunum" style=""
                  >限购{{ i.goodsid.limited }}件</view
                >
                <view
                  class=""
                  style="display: flex; justify-content: space-between"
                >
                  <div>
                    <span style="color: #d81e06"
                      >${{
                        parseFloat(i.goodsid.price * i.goodsid.discount).toFixed(2)
                      }}</span
                    >
                    <span style="font-size: 20rpx; text-decoration: line-through"
                      >${{ i.goodsid.price }}</span
                    >
                  </div>
                  <div
                    style="
                      text-align: center;
                      width: 150rpx;
                      display: flex;
                      height: 20rpx;
                      line-height: 22rpx;
                    "
                  >
                    <span
                    @click="subtract_shopnum_list(i.shopnum, i._id,'jian')"
                      ><svg
                        t="1730375918621"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="22847"
                        width="19"
                        height="19"
                      >
                        <path
                          d="M512 58.368c-246.784 0-446.976 200.192-446.976 446.976 0 246.784 200.192 446.976 446.976 446.976s446.976-200.192 446.976-446.976c0-246.784-200.192-446.976-446.976-446.976z m225.28 472.576H286.72c-14.336 0-25.6-11.776-25.6-25.6s11.776-25.6 25.6-25.6h450.56c14.336 0 25.6 11.776 25.6 25.6s-11.264 25.6-25.6 25.6z"
                          p-id="22848"
                          data-spm-anchor-id="a313x.search_index.0.i16.6dae3a81Fjk3cu"
                          class="selected"
                          fill="#d81e06"
                        ></path></svg
                    ></span>
                    <view class="" style="margin: 10rpx">{{ i.shopnum }}</view>
                    <span
                    @click="subtract_shopnum_list(i.shopnum, i._id,'jia')"
                      ><svg
                        t="1730375585073"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4590"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M512 909.061224c-218.906122 0-397.061224-178.155102-397.061224-397.061224s178.155102-397.061224 397.061224-397.061224 397.061224 178.155102 397.061224 397.061224-178.155102 397.061224-397.061224 397.061224z"
                          fill="#d81e06"
                          p-id="4591"
                          data-spm-anchor-id="a313x.search_index.0.i5.6dae3a81yqCr0N"
                          class="selected"
                        ></path>
                        <path
                          d="M660.897959 531.853061h-297.795918c-10.971429 0-19.853061-8.881633-19.853061-19.853061s8.881633-19.853061 19.853061-19.853061h297.795918c10.971429 0 19.853061 8.881633 19.853061 19.853061s-8.881633 19.853061-19.853061 19.853061z"
                          fill="#DCFFFA"
                          p-id="4592"
                        ></path>
                        <path
                          d="M512 680.75102c-10.971429 0-19.853061-8.881633-19.853061-19.853061v-297.795918c0-10.971429 8.881633-19.853061 19.853061-19.853061s19.853061 8.881633 19.853061 19.853061v297.795918c0 10.971429-8.881633 19.853061-19.853061 19.853061z"
                          fill="#DCFFFA"
                          p-id="4593"
                        ></path></svg
                    ></span>
                  </div>
                </view>
              </div>
              </div>
           </view>
           
          </checkbox-group>

          </div>  &nbsp;&nbsp;
          

        </div>
       <div>秒杀商品</div>
       <div style="dwidth: 100%; display: flex;" >
        <div style="">
          
        <!-- <input type="checkbox" name="" id="" v-model="i._id" :check="i.checked" @change="handleChange(i.checked,i._id)"> -->
     
        <checkbox-group
         @change="handleChange"
         >
         <view v-for="i in cartlist.filter(item=>item.state===7)" :key="i._id" style="display:flex;margin-top:20rpx">

          <checkbox :value="i._id" :checked="i.checked" 
          style="width: 50rpx; height: 50rpx; line-height:250rpx"></checkbox>
          <div style="display: flex">

        
            <div style="width: 200rpx; height: 200rpx">
              <img
                :src="i.goodsid.img"
                style="width: 100%; height: 100%" 
                alt=""
              />
            </div>
            <div
              style="
                width: 400rpx;
                height: 160rpx;
                padding: 20rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              "
            >
              <view class="" style="font-size: 25rpx">{{ i.goodsid.name }}</view>
              <view class="limitebunum" style=""
                >限购{{ i.goodsid.limited }}件</view
              >
              <view
                class=""
                style="display: flex; justify-content: space-between"
              >
                <div>
                  <span style="color: #d81e06"
                    >${{
                      parseFloat(i.goodsid.price * i.goodsid.discount).toFixed(2)
                    }}</span
                  >
                  <span style="font-size: 20rpx; text-decoration: line-through"
                    >${{ i.goodsid.price }}</span
                  >
                </div>
                <div
                  style="
                    text-align: center;
                    width: 150rpx;
                    display: flex;
                    height: 20rpx;
                    line-height: 22rpx;
                  "
                >
                  <span
                  @click="subtract_shopnum_list(i.shopnum, i._id,'jian')"
                    ><svg
                      t="1730375918621"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="22847"
                      width="19"
                      height="19"
                    >
                      <path
                        d="M512 58.368c-246.784 0-446.976 200.192-446.976 446.976 0 246.784 200.192 446.976 446.976 446.976s446.976-200.192 446.976-446.976c0-246.784-200.192-446.976-446.976-446.976z m225.28 472.576H286.72c-14.336 0-25.6-11.776-25.6-25.6s11.776-25.6 25.6-25.6h450.56c14.336 0 25.6 11.776 25.6 25.6s-11.264 25.6-25.6 25.6z"
                        p-id="22848"
                        data-spm-anchor-id="a313x.search_index.0.i16.6dae3a81Fjk3cu"
                        class="selected"
                        fill="#d81e06"
                      ></path></svg
                  ></span>
                  <view class="" style="margin: 10rpx">{{ i.shopnum }}</view>
                  <span
                  @click="subtract_shopnum_list(i.shopnum, i._id,'jia')"
                    ><svg
                      t="1730375585073"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4590"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M512 909.061224c-218.906122 0-397.061224-178.155102-397.061224-397.061224s178.155102-397.061224 397.061224-397.061224 397.061224 178.155102 397.061224 397.061224-178.155102 397.061224-397.061224 397.061224z"
                        fill="#d81e06"
                        p-id="4591"
                        data-spm-anchor-id="a313x.search_index.0.i5.6dae3a81yqCr0N"
                        class="selected"
                      ></path>
                      <path
                        d="M660.897959 531.853061h-297.795918c-10.971429 0-19.853061-8.881633-19.853061-19.853061s8.881633-19.853061 19.853061-19.853061h297.795918c10.971429 0 19.853061 8.881633 19.853061 19.853061s-8.881633 19.853061-19.853061 19.853061z"
                        fill="#DCFFFA"
                        p-id="4592"
                      ></path>
                      <path
                        d="M512 680.75102c-10.971429 0-19.853061-8.881633-19.853061-19.853061v-297.795918c0-10.971429 8.881633-19.853061 19.853061-19.853061s19.853061 8.881633 19.853061 19.853061v297.795918c0 10.971429-8.881633 19.853061-19.853061 19.853061z"
                        fill="#DCFFFA"
                        p-id="4593"
                      ></path></svg
                  ></span>
                </div>
              </view>
            </div>
            </div>
         </view>
         
        </checkbox-group>

        </div>  &nbsp;&nbsp;
        

      </div>
        <div>失效商品</div>
        <div style="dwidth: 100%; display: flex;" >
          <div style="">
            
          <!-- <input type="checkbox" name="" id="" v-model="i._id" :check="i.checked" @change="handleChange(i.checked,i._id)"> -->
       
          <checkbox-group
           @change="handleChange"
           >
           <view v-for="i in cartlist.filter(item=>item.state===6)" :key="i._id" style="display:flex;margin-top:20rpx">

            <checkbox :value="i._id" :checked="i.checked" 
            style="width: 50rpx; height: 50rpx; line-height:250rpx"></checkbox>
            <div style="display: flex">

          
              <div style="width: 200rpx; height: 200rpx">
                <img
                  :src="i.goodsid.img"
                  style="width: 100%; height: 100%" 
                  alt=""
                />
              </div>
              <div
                style="
                  width: 400rpx;
                  height: 160rpx;
                  padding: 20rpx;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                "
              >
                <view class="" style="font-size: 25rpx">{{ i.goodsid.name }}</view>
                <view class="limitebunum" style=""
                  >限购{{ i.goodsid.limited }}件</view
                >
                <view
                  class=""
                  style="display: flex; justify-content: space-between"
                >
                  <div>
                    <span style="color: #d81e06"
                      >${{
                        parseFloat(i.goodsid.price * i.goodsid.discount).toFixed(2)
                      }}</span
                    >
                    <span style="font-size: 20rpx; text-decoration: line-through"
                      >${{ i.goodsid.price }}</span
                    >
                  </div>
                  <div
                    style="
                      text-align: center;
                      width: 150rpx;
                      display: flex;
                      height: 20rpx;
                      line-height: 22rpx;
                    "
                  >
                    <span
                    @click="subtract_shopnum_list(i.shopnum, i._id,'jian')"
                      ><svg
                        t="1730375918621"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="22847"
                        width="19"
                        height="19"
                      >
                        <path
                          d="M512 58.368c-246.784 0-446.976 200.192-446.976 446.976 0 246.784 200.192 446.976 446.976 446.976s446.976-200.192 446.976-446.976c0-246.784-200.192-446.976-446.976-446.976z m225.28 472.576H286.72c-14.336 0-25.6-11.776-25.6-25.6s11.776-25.6 25.6-25.6h450.56c14.336 0 25.6 11.776 25.6 25.6s-11.264 25.6-25.6 25.6z"
                          p-id="22848"
                          data-spm-anchor-id="a313x.search_index.0.i16.6dae3a81Fjk3cu"
                          class="selected"
                          fill="#d81e06"
                        ></path></svg
                    ></span>
                    <view class="" style="margin: 10rpx">{{ i.shopnum }}</view>
                    <span
                    @click="subtract_shopnum_list(i.shopnum, i._id,'jia')"
                      ><svg
                        t="1730375585073"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4590"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M512 909.061224c-218.906122 0-397.061224-178.155102-397.061224-397.061224s178.155102-397.061224 397.061224-397.061224 397.061224 178.155102 397.061224 397.061224-178.155102 397.061224-397.061224 397.061224z"
                          fill="#d81e06"
                          p-id="4591"
                          data-spm-anchor-id="a313x.search_index.0.i5.6dae3a81yqCr0N"
                          class="selected"
                        ></path>
                        <path
                          d="M660.897959 531.853061h-297.795918c-10.971429 0-19.853061-8.881633-19.853061-19.853061s8.881633-19.853061 19.853061-19.853061h297.795918c10.971429 0 19.853061 8.881633 19.853061 19.853061s-8.881633 19.853061-19.853061 19.853061z"
                          fill="#DCFFFA"
                          p-id="4592"
                        ></path>
                        <path
                          d="M512 680.75102c-10.971429 0-19.853061-8.881633-19.853061-19.853061v-297.795918c0-10.971429 8.881633-19.853061 19.853061-19.853061s19.853061 8.881633 19.853061 19.853061v297.795918c0 10.971429-8.881633 19.853061-19.853061 19.853061z"
                          fill="#DCFFFA"
                          p-id="4593"
                        ></path></svg
                    ></span>
                  </div>
                </view>
              </div>
              </div>
           </view>
           
          </checkbox-group>

          </div>  &nbsp;&nbsp;
          

        </div>
        
      </div>    
    </div>
   
</div>
  </view>
</template>

<script setup lang="ts">
import { useMainStore } from '@/store/index';
import { shopcart,subtract_shopnum,update_cart_checked } from '@/utils/api.ts';
import { onShow } from '@dcloudio/uni-app';
import { ref, onMounted, computed } from 'vue';

// onShow(() => {
//   getlist();
// });
const cartlist = ref([]);
const getlist = async () => {
  let data = await shopcart({ userid: localStorage.getItem('user_id') });
  console.log(data);
  
  cartlist.value = data.data;
};
onMounted(() => {
  getlist();
})
const checkall=ref(false)

const  handleChange=async (e)=> {
  console.log(e);
  
await update_cart_checked({shop_id:e.detail.value,user_id:localStorage.getItem('user_id')})
 getlist()




}




// 需要花费多少钱
const priceall= computed(()=>{
  return cartlist.value.filter(item=>item.checked).reduce((a,b)=>{
    return parseFloat(a+(b.goodsid.price*b.goodsid.discount)*b.shopnum).toFixed(2)
  },0)
})
// 节省金钱
const save_money= computed(()=>{
  return cartlist.value.filter(item=>item.checked).reduce((a,b)=>{
    return parseFloat(a+(b.goodsid.price*b.shopnum*(1-b.goodsid.discount))).toFixed(2)
  },0)
})

const subtract_shopnum_list=async(shopnum,id,state)=>{
  console.log(shopnum,id,state);
  
if(state==='jian'){
  shopnum--
  let data=await subtract_shopnum({shopnum,id})
getlist()
}else{
  shopnum++
  let data=await subtract_shopnum({shopnum,id})
getlist()
}

}


</script>

<style scoped lang="scss">
.limitebunum {
  border-radius: 5rpx;
  color: #d81e06;
  width: 100rpx;
  border: 1rpx solid #d81e06;

  font-size: 20rpx;
}
</style>